<script setup lang="ts">
import type { VxeGridProps } from 'vxe-table'

import { Search } from '@element-plus/icons-vue'
import { useDeleteProductCertification, useGetProductCertificationPage } from '@fl/api/supplier'
import { SearchTable } from '@fl/components'
import SubmitBtn from '@fl/components/submit-btn.vue'
import { useMessage } from '@fl/hooks/web/use-message'

import AddOrEdit from './add-or-edit.vue'
import Detail from './detail.vue'

const { createConfirmModal } = useMessage()

const showAddOrEdit = ref<boolean>(false)
const showDetail = ref<boolean>(false)
const addOrEditId = ref<string>('')
const detailId = ref<string>('')

const inputValue = ref<string>('')
const searchText = ref<string>('')
const tablePage = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 0,
})
const getProductCertificationPageParams = computed(() => ({
    certificateName: searchText.value,
    page: tablePage.currentPage,
    size: tablePage.pageSize,
}))

const {
    data: productCertificationPageData,
    isLoading: isGetProductCertificationPageLoading,
    total: productCertificationTotal,
} = useGetProductCertificationPage(getProductCertificationPageParams)
const { isPending: isDeleteProductCertificationPending, mutate: deleteProductCertification } = useDeleteProductCertification()

// #region Table
const isTableLoading = computed(() => isGetProductCertificationPageLoading.value)

const gridOptions = reactive<VxeGridProps>({
    columns: [
        { field: 'id', title: '证书ID' },
        { field: 'certificateName', title: '证书名称' },
        { field: 'certificateFactoryName', title: '工厂名称' },
        { field: 'certificateIssuingAuthority', title: '发证单位' },
        { field: 'productName', title: '关联产品' },
        { field: 'certificateIssuingDate', title: '发证日期', width: 120 },
        { field: 'certificateExpireDate', title: '有效期至', width: 120 },
        { fixed: 'right', slots: { default: 'operate' }, title: '操作', width: 130 },
    ],
})

watchEffect(() => {
    tablePage.total = productCertificationTotal.value
})
// #endregion

// #region UI Listener
function onSearchBtnClick() {
    searchText.value = inputValue.value
    resetTablePage()
}

function resetTablePage() {
    tablePage.currentPage = 1
    tablePage.pageSize = 10
}

function onAddBtnClick() {
    addOrEditId.value = ''
    showAddOrEdit.value = true
}

function onCheckDetailBtnClick(row: any) {
    detailId.value = row.id
    showDetail.value = true
}

// function onEditBtnClick(row: any) {
//     addOrEditId.value = row.id
//     showAddOrEdit.value = true
// }

function onDeleteBtnClick(row: any) {
    createConfirmModal({
        content: '一旦删除不可恢复',
        onSuccess: () => {
            deleteProductCertification(row.id, {
                onSuccess() {
                    ElMessage.success('操作成功')
                },
            })
        },
        title: '要删除吗?',
    })
}
// #endregion
</script>

<template>
    <el-card shadow="never">
        <SearchTable v-bind="gridOptions"
                     v-model:pager="tablePage"
                     :loading="isTableLoading"
                     :data="productCertificationPageData"
        >
            <template #toolbar_buttons>
                <div class="mb-12 flex w-full justify-between">
                    <div>
                        <el-button type="primary"
                                   @click="onAddBtnClick"
                        >
                            <div class="i-ic:baseline-add size-16" />
                            添加证书
                        </el-button>
                    </div>

                    <el-input v-model="inputValue"
                              class="!w-300"
                              placeholder="请输入证书名称进行搜索"
                    >
                        <template #append>
                            <SubmitBtn :icon="Search"
                                       style="background: #da0004; color:#fff"
                                       class="w-40 !pl-12"
                                       @click="onSearchBtnClick"
                            />
                        </template>
                    </el-input>
                </div>
            </template>

            <template #brand_logo_slot="{ row }">
                <el-image class="h-100"
                          :src="row.brandLogo"
                          fit="contain"
                          :preview-src-list="[row.brandLogo]"
                />
            </template>

            <template #operate="{ row }">
                <el-button type="primary"
                           text
                           class="!p-4"
                           @click="onCheckDetailBtnClick(row)"
                >
                    查看
                </el-button>

                <!-- <el-button text
                           type="primary"
                           class="!p-4"
                           @click="onEditBtnClick(row)"
                >
                    编辑
                </el-button> -->

                <el-button type="warning"
                           text
                           class="!p-4"
                           :loading="isDeleteProductCertificationPending"
                           @click="onDeleteBtnClick(row)"
                >
                    删除
                </el-button>
            </template>
        </SearchTable>
    </el-card>

    <AddOrEdit :key="addOrEditId"
               v-model:id="addOrEditId"
               v-model:visible="showAddOrEdit"
    />

    <Detail :key="detailId"
            v-model:id="detailId"
            v-model:visible="showDetail"
    />
</template>

<style lang="scss" scoped>
:deep(.el-input-group__append) {
    width: 40px;
    padding: 0;
}
</style>
